<template>
  <div class="guidePage"
       v-show="isOpen">
    <div class="guideBox"></div>
    <!-- 选择引导页模板 -->
    <div class="guideChoose"
         v-show="chooseBox">
      <div class="chooseNav">
        <span>当前账号未加入组织,请选择：</span>
        <div class="chooseImg">
          <div class="backBox">
            <img @click="choosetype('join')"
                 src="../../../assets/guideImg/jr-img.png"
                 alt="">
            <span class="imgIntro">加入项目部/组织</span>
          </div>
          <span class="orStyle">或</span>
          <div class="backBox">
            <img @click="choosetype('create')"
                 src="../../../assets/guideImg/cj-img.png"
                 alt="">
            <span class="imgIntro">创建组织</span>
          </div>
        </div>
        <el-button @click="closeGuide"
                   class="guideBtn"
                   type="text">跳过</el-button>
      </div>
    </div>
    <div class="guideCon"
         v-show="chooseOne">
      <div class="header-box">
        <el-button type="primary"
                   v-if="type === 'join'"
                   style="margin-right: 113px;">加入组织</el-button>
        <el-button type="primary"
                   v-else>创建单位</el-button>
      </div>
      <span :class="[type === 'join' ? 'arrow' : 'createArrow']"></span>
      <div :class="[type === 'join' ? 'guideBody' : 'createGuideBody']">
        <div class="guideNav">
          <p class="numberTitle"
             v-if="type === 'join'">加入组织</p>
          <p class="numberTitle"
             v-else>创建组织</p>
        </div>
        <el-carousel trigger="click"
                     :autoplay="false"
                     arrow="never"
                     :height="joinBannerImg+'px'"
                     indicator-position="none"
                     ref="cardShow"
                     @change="changeCar"
                     v-if="type === 'join'">
          <el-carousel-item v-for="(item,value) in chooseCreateData"
                            :key="value">
            <div v-if="type === 'join'">
              <p class="numberSort">{{item.intro}}</p>
            </div>
            <div v-else>
              <p class="numberSort">{{item.intro}}</p>
            </div>
            <img class="openImg"
                 :src=item.url
                 ref="bannerHeight"
                 @load="imgload"
                 alt="">
            <p class="tips"
               v-if="type === 'join'">
              {{item.tips}}</p>
            <p class="tips"
               v-else>{{item.tips}}</p>
          </el-carousel-item>
        </el-carousel>
        <el-carousel trigger="click"
                     :autoplay="false"
                     arrow="never"
                     @change="changeCar"
                     :height="createBannerImg+'px'"
                     indicator-position="none"
                     ref="cardShow"
                     v-else>
          <el-carousel-item v-for="(item,value) in chooseJoinData"
                            :key="value">
            <div v-if="type === 'join'">
              <p class="numberSort">{{item.intro}}</p>
            </div>
            <div v-else>
              <p class="numberSort">{{item.intro}}</p>
            </div>
            <img class="openImg"
                 :src=item.url
                 ref="bannerHeight"
                 @load="imgload"
                 alt="">
            <p class="tips"
               v-if="type === 'join'">{{item.tips}}</p>
            <p class="tips"
               v-else>{{item.tips}}</p>
          </el-carousel-item>
        </el-carousel>

        <div class="btnbox">
          <el-button @click="closeGuide">跳过</el-button>
          <el-button @click="arrowClick('left')"
                     :disabled="openLeftDisabled">上一步</el-button>
          <el-button v-if="(checkedVal === 2 && type === 'join') || (checkedVal === 3 && type === 'create')"
                     type="primary"
                     @click="closeGuide">完成</el-button>
          <el-button type="primary"
                     v-else
                     @click="arrowClick('right')">下一步</el-button>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      checkedVal: '',
      openLeftDisabled: true, //上一步按钮禁用
      openRightDisabled: false,
      joinBannerImg: '',
      createBannerImg: '',
      type: '', //选择类型
      chooseBox: true, //选择
      chooseOne: false, //选择哪套引导页
      chooseCreateData: [{
        value: 0,
        url: require('../../../assets/guideImg/yqm-img.png'),
        intro: '第一步：输入邀请码加入单位/项目部',
        tips: '注：单位邀请码在“配置中心-我的单位-查看单位“页面里查看，项目邀请码在“项目中心-项目列表-项目信息”页面里查看'
      }, {
        value: 1,
        url: require('../../../assets/guideImg/bmgw-img.png'),
        intro: '第二步：选择部门和岗位',
        tips: ''
      }, {
        value: 2,
        url: require('../../../assets/guideImg/bmgw2-img.png'),
        intro: '第三步：单位管理员（项目经理）批准加入组织后，可点击"进入平台"。',
        tips: ''
      }],
      chooseJoinData: [{
        value: 0,
        url: require('../../../assets/guideImg/dwxx-img.png'),
        intro: '第一步：创建单位，维护单位信息',
        tips: '注：创建项目部需要加入单位，然后创建项目部'
      }, {
        value: 1,
        url: require('../../../assets/guideImg/dwxx2-img.png'),
        intro: '第二步：点击业务系统申请，选择应用系统申请',
        tips: '注：查看单位：可查看单位邀请码'
      }, {
        value: 2,
        url: require('../../../assets/guideImg/dwxx3-img.png'),
        intro: '第三步：选择应用系统申请后，联系管理员通过系统授权，授权通过后即可进入平台',
        tips: ''
      }, {
        value: 3,
        url: require('../../../assets/guideImg/dwxx4-img.png'),
        intro: '第四步：点击进入平台',
        tips: ''
      }],
    }
  },
  props: {
    isOpen: Boolean,
  },
  created () {

  },
  mounted () {
    this.imgload()
  },
  methods: {
    //页面首次加载,获取图片高度
    imgload () {
      this.$nextTick(() => {
        if (this.type === 'join') {
          this.joinBannerImg = this.$refs.bannerHeight[0].naturalHeight + 120
        } else {
          this.createBannerImg = this.$refs.bannerHeight[0].naturalHeight + 100
        }

      })
    },
    //跳过,关闭引导页
    closeGuide () {
      this.$emit('update:isOpen', false)
      this.$emit('isOne', false)
      // this.isOpen = false
    },
    //上一页,下一页
    arrowClick (val) {
      if (val === 'right') {
        this.$refs.cardShow.next()
      } else {
        this.$refs.cardShow.prev()
      }
    },
    //切换图片时
    changeCar (val) {
      this.checkedVal = val
      this.chooseCreateData.forEach(item => {
        if (item.value == val && this.type === 'join') {
          if (item.tips === '') {
            this.joinBannerImg = this.$refs.bannerHeight[val].naturalHeight + 60
          } else {
            this.joinBannerImg = this.$refs.bannerHeight[val].naturalHeight + 120
          }
        }
      })

      this.chooseJoinData.forEach(item2 => {
        if (item2.value == val && this.type === 'create') {
          if (item2.tips === '') {
            this.createBannerImg = this.$refs.bannerHeight[val].naturalHeight + 80
          } else {
            this.createBannerImg = this.$refs.bannerHeight[val].naturalHeight + 100
          }
        }
      })
      //当前在第一页时,上一页禁用
      if (val === 0) {
        this.openLeftDisabled = true
      } else {
        this.openLeftDisabled = false
      }
      //最后一页的时候下一页禁用
      // if ((val === 2 && this.type === "create") || (val === 3 && this.type === "join")) {
      //   this.openRightDisabled = true
      // } else {
      //   this.openRightDisabled = false
      // }
    },
    //选择
    choosetype (val) {
      this.chooseBox = false
      this.type = val
      this.chooseOne = true
      // if (val === 'join') {
      //   this.chooseOne = true
      // } else {
      //   this.chooseOne = true
      // }

    },

  },
  computed: {},
  watch: {}
}
</script>

<style lang="scss" scoped>
.guidePage {
  .guideBox {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background: #000;
    z-index: 2263;
  }
  //选择引导页
  .guideChoose {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2264;
    .pageTitle {
      float: left;
      padding: 40px;
    }
    span {
      font-family: "Microsoft YaHei Semibold";
      font-weight: 600;
      font-size: 20px;
      text-align: left;
      color: #fff;
    }
    .chooseNav {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      span {
        display: block;
        text-align: left;
      }
      .chooseImg {
        display: flex;
        justify-content: space-around;
        .backBox {
          margin: 20px 0px;
          height: 300px;
          padding: 20px;
          background-color: #fff;
          img {
            margin: 20px;
          }
          .imgIntro {
            font-family: "Microsoft YaHei";
            font-weight: normal;
            font-size: 14px;
            color: #000;
            text-align: center;
          }
        }
        .orStyle {
          line-height: 300px;
          padding: 20px;
        }
      }
    }
  }

  // 引导页
  .guideCon {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2264;
    .arrow {
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 16px solid #fff;
      position: absolute;
      right: 160px;
      top: 67px;
    }
    .createArrow {
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 16px solid #fff;
      position: absolute;
      right: 50px;
      top: 67px;
    }
    .header-box {
      float: right;
      padding-left: 20px;
      margin-top: 20px;
      padding-right: 20px;
    }

    .header-box span {
      font-size: 12px;
    }
    .guideBody {
      width: 520px;
      position: absolute;
      right: 130px;
      top: 80px;
      border-radius: 8px;
      background: #fff;
    }
    .createGuideBody {
      width: 520px;
      position: absolute;
      right: 20px;
      top: 80px;
      border-radius: 8px;
      background: #fff;
    }
    .openImg {
      max-width: 100%;
      max-height: 100%;
      display: block;
      margin: auto;
    }
    .numberTitle {
      padding: 20px 0 0 20px;
      font-family: "Microsoft YaHei Semibold";
      font-weight: 600;
      font-size: 20px;
      text-align: left;
      color: rgba(0, 0, 0, 0.85);
    }
    .numberSort {
      padding: 20px 0 20px 20px;
      font-family: "Microsoft YaHei Semibold";
      font-weight: 600;
      font-size: 14px;
      text-align: left;
      color: rgba(0, 0, 0, 0.85);
    }
    .tips {
      font-family: "Microsoft YaHei";
      font-weight: normal;
      font-size: 12px;
      line-height: 18px;
      text-align: left;
      color: rgba(0, 0, 0, 0.45);
      padding: 20px;
    }
    .btnbox {
      float: right;
      padding: 20px 20px 20px 0px;
    }
  }
  .guideBtn {
    padding: 10px 20px;
    border: 1px solid #fff;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    float: right;
    &:hover {
      color: #409eff;
    }
  }
}
</style>
